<template>
  <div class="person">
    <h2>需求：当水温达到60度，或者水位达到80cm时，给服务器发送请求</h2>
   <h2>当前水温为：{{ temp }}</h2>
   <h2>当前水位为：{{ height }}</h2>
    <button @click="changeTemp">点我水温+10</button>
    <button @click="changeHeight">点我水位+10</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import { ref, watch,watchEffect } from 'vue'

  // 定义数据
  let temp = ref(10)
  let height = ref(0)
  
  // 定义方法
  function changeTemp() {
      temp.value += 10
  }
  function changeHeight() {
      height.value += 10
  }
  
  // 监视数据 ---- watch实现
  // watch([temp,height], (Value) => {
  //   //从Value中获取最新水温，最新水位
  //   let[newTemp,newHeight] = Value
  //   if(newTemp >= 60 || newHeight >= 80) {
  //     console.log('给服务器发送请求')
  //   }
  // })

  //监视 -- watchEffect实现，开始就会执行一次回调函数
  watchEffect(() => {
    if(temp.value >= 60 || height.value >= 80) {
      console.log('给服务器发送请求')
    }
  })

</script>

<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
}
button { 
    margin: 0 5px;
}
</style>


